<script setup lang="ts">
import { onMounted, onBeforeMount } from "vue"


// this
// const instance: ComponentInternalInstance | null = getCurrentInstance();
// let _this: any = instance ? instance.appContext.config.globalProperties : null;

// onBeforeMount
onBeforeMount((): void => {
})

// onMounted
onMounted(async (): Promise<void> => {
})

// Exportation
defineExpose({
})
</script>


<template>
  <div id="threeD">
    <!-- electron导入的页面, 路由需要是hash模式 -->
    <!-- 
      点击创建场景可进入应用  
      此项目是基于ThreeJs的3D机器人操作界面, 带有视频、语音、文字通信功能 ( WebRTC+WebSocket ), Electron+Vue+Node
      由于本项目未配置Node后端, 视频通信在此项目中暂不支持
      详情可查看项目: https://gitee.com/wudongo/mutiply-meeting-player-client
      可结合Node后端: https://gitee.com/wudongo/mutiply-meeting-player-node  运行
    -->
    <div class="threeD-header">
      Press "创建场景", then you can operate the character by WASD/↑←↓→, and you can click the character.
    </div>
    <iframe class="frame" ref="frame" id="frame" src="/three3D/index.html" :frameborder="0"></iframe>
  </div>
</template>


<style lang="scss" scoped>
@import "styles/mixin.scss";
$headH: 2.5rem;
#threeD {
  width: 100%;
  height: 100%;
  color: white !important;
  position: relative;
  flex-wrap: nowrap;
  @include flex-column-center-center;
}
.threeD-header {
  width: 100%;
  height: 5%;
  box-shadow: inset 0px 0px 40px rgba($color: #ffffff, $alpha: .4);
  @include flex-column-center-center;
  font-size: 1.3rem;
  text-shadow: 10px 5px 5px rgba($color: #ffffff, $alpha: 1);
}
.frame {
  width: 100%;
  height: 95%;
  color: white !important;
  @include flex-row-center-center;
}
</style>
